<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <script src="./js/vue.js"></script>
    <style>
        .list {
            display: flex;
            flex-flow: row wrap;
        }

        .product {
            width: 300px;
            /* border: 1px solid black; */
            box-shadow: 0px 0px 12px #cccccc;
            border-radius: 12px;
            overflow: hidden;
            margin: 20px;
        }

        .product .img {
            width: 100%;
            height: 0px;
            padding-top: 100%;
            position: relative;
            box-shadow: 0px 1px 1px #cccccc;
        }

        .product .img>img {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
        }

        .product .info {
            padding: 16px 8px;
            font-size: 24px;
            color: brown;
        }

        .product .info .tip>i {
            display: inline-block;
            font-style: normal;
            font-size: 12px;
            background-color: green;
            color: white;
            padding: 2px 6px;
            border-radius: 6px;
            transform: scale(0.8);
        }

        .product .info .discount {
            text-decoration: line-through;
            font-size: 14px;
            color: #cccccc;
        }

        .product .info>span:last-child {
            float: right;
            line-height: 1.8;
            color: grey;
            font-size: 16px;
        }
        .product .info .icon-like::before{
            padding-right: 6px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="list">
            <div class="product" v-for="(p, index) in list" :key="index">
                <div class="img">
                    <img src="./img/d.jpg">
                </div>
                <div class="info">
                    <span class="tip">
                        <!-- ￥{{ p.discount?(p.price*p.discount).toFixed(1):p.price.toFixed(1) }} -->
                        {{ p.price | toPrice(p.discount) }}
                        <i v-if="p.discount">{{ p.discount*10 }}折</i>
                    </span>
                    <span class="discount" v-if="p.discount">￥{{ p.price.toFixed(1) }}</span>
                    <!-- <span class="iconfont icon-like">{{ p.like?(p.like>1000?p.like/1000+"k":p.like):0 }}</span> -->
                    <!-- <span class="iconfont icon-like">{{ p.like | toCarry }}</span> -->
                    <span class="iconfont icon-like">{{ p.like | toCarry() }}</span>
                </div>
                <hr>
                <div class="info">
                    <span class="tip">
                        {{ loadPrice(p.price,p.discount) }}
                        <i v-if="p.discount">{{ p.discount*10 }}折</i>
                    </span>
                    <span class="discount" v-if="p.discount">￥{{ p.price.toFixed(1) }}</span>
                    <span class="iconfont icon-like">{{ loadCarry(p.like) }}</span>
                </div>
            </div>

        </div>
    </div>
</body>
<script>
    // function funA(arg1,arg2){}
    // funA(1,2);
    /*
    过滤器 (filters)
        - 功能：将向页面写入的数据，经过特定的方法 进行 包装处理，将处理后的结果展示到页面中，
                页面的最终结果上来说，过滤器和计算属性功能相似
        - 范围：滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)
        - 语法：在页面中通过管道符 | ，连接待处理变量和过滤器方法 
        <!-- 在双花括号中 -->
        {{ 待处理变量 | 过滤器名称 }}
        {{ 待处理变量 | 过滤器方法名(..arg) }}
        
        <!-- 在 `v-bind` 中 -->
        <div v-bind:id="待处理变量 | 过滤器方法名"></div>
        <div v-bind:id="待处理变量 | 过滤器方法名(..arg)"></div> 
    */
    new Vue({
        el: "#app",
        data: {
            list: [
                { price: 60, discount: 0.8, like: 3 },
                { price: 80, discount: 0.7, like: 300 },
                { price: 80, discount: 0.7, like: 3000 },
                { price: 60, discount: null, like: 300000 },
                { price: 60, discount: null, like: null }
            ]
        },
        // 以 new Vue 配置根属性进行 filters 定义，取值Object
        //     key 定义过滤器名称 value 定义过滤器方法
        filters:{
            // 每个过滤器方法 第一个形参都是 页面调用时传入的 待处理变量 （ | 左侧的值 ）
            toCarry:function(arg){
                // console.log("过滤器toCarry：",arg);
                // return "toCarry"
                if(!arg){
                    return 0;
                }
                if(arg>10000){
                    return (arg/10000).toFixed(1)+"w";
                }
                if(arg>1000){
                    return (arg/1000).toFixed(1)+"k";
                }
                return arg;
            },
            // 所有过滤的方法 从第二个形参位置开始记录 过滤方法调用时 | 右侧额外传入的参数
            toPrice(price,dis){
                // console.log("价格折扣计算方法:",price,dis);
                // return "toPrice-"+price;
                if(!dis){
                    return "￥"+price.toFixed(1);
                }
                return "￥"+(price*dis).toFixed(1);
            }
        },
        methods: {
            loadCarry:function(arg){
                if(!arg){
                    return 0;
                }
                if(arg>10000){
                    return (arg/10000).toFixed(1)+"w";
                }
                if(arg>1000){
                    return (arg/1000).toFixed(1)+"k";
                }
                return arg;
            },
            loadPrice(price,dis){
                if(!dis){
                    return "￥"+price.toFixed(1);
                }
                return "￥"+(price*dis).toFixed(1);
            }
        },

    })
</script>

</html>